<template>
  <div class="home">
    <!-- 头部搜索区域 -->
    <div class="head">
      <div class="title">优医</div>
      <div class="search">
        <img src="@/assets/upload/search-default@2x.png" class="search_icon" />
        <span>搜一搜: 疾病/症状/医生/健康知识</span>
      </div>
    </div>
    <!-- nav导航 -->
    <div class="nav">
      <div class="diagnose">
        <div class="item">
          <img src="@/assets/upload/ask-doctor@2x.png" class="img" />
          <div>问医生</div>
          <p class="desc">按科室查问医生</p>
        </div>
        <div class="item" @click="$router.push('/consult/fast')">
          <img src="@/assets/upload/inquiry-graphic@2x.png" class="img" />
          <div>极速问诊</div>
          <p class="desc">20s医生极速回复</p>
        </div>
        <div class="item">
          <img src="@/assets/upload/inquiry-prescribe@2x.png" class="img" />
          <div>开药门诊</div>
          <p class="desc">线上买药更方便</p>
        </div>
      </div>
      <van-grid>
        <van-grid-item text="药品订单">
          <template #icon>
            <img src="@/assets/upload/drug-order@2x.png" class="icon" />
          </template>
        </van-grid-item>
        <van-grid-item text="健康档案">
          <template #icon>
            <img src="@/assets/upload/health-records@2x.png" class="icon" />
          </template>
        </van-grid-item>
        <van-grid-item text="我的处方">
          <template #icon>
            <img src="@/assets/upload/my-prescription@2x.png" class="icon" />
          </template>
        </van-grid-item>
        <van-grid-item text="疾病查询">
          <template #icon>
            <img src="@/assets/upload/disease-inquiry@2x.png" class="icon" />
          </template>
        </van-grid-item>
      </van-grid>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="@/assets/upload/coupon-banner@2x.png" class="swipeImg" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/upload/coupon-banner@2x.png" class="swipeImg" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/upload/coupon-banner@2x.png" class="swipeImg" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/upload/coupon-banner@2x.png" class="swipeImg" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 主体内容区域 -->
    <van-tabs
      v-model:active="activeName"
      shrink
      lazy-render
      @change="onChange"
    >
      <van-tab title="关注" name="like">
        <van-list
          :loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <VanCell :isLike="true" :knowledgeList="attenList" @onLikeFlag="onLikeFlag"></VanCell>
        </van-list>
      </van-tab>

      <van-tab title="推荐" name="recommend">
        <van-list
          :loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <VanCell :knowledgeList="recomList" @onLikeFlag="onLikeFlag"></VanCell>
        </van-list>
      </van-tab>

      <van-tab title="减脂" name="fatReduction">
        <van-list
          :loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <VanCell :knowledgeList="loseList" @onLikeFlag="onLikeFlag"></VanCell>
        </van-list>
      </van-tab>

      <van-tab title="饮食" name="food">
        <van-list
          :loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <VanCell :knowledgeList="eatList" @onLikeFlag="onLikeFlag"></VanCell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { getKnowledgeList } from '@/api'
import { ref } from 'vue'
import VanCell from './components/vanCell.vue'

// 标签切换
const activeName = ref('recommend')

// 当前页数
const attenCurrent = ref(1)
const recomCurrent = ref(1)
const loseCurrent = ref(1)
const eatCurrent = ref(1)

// 接口数据
const params = ref({
  type: activeName.value,
  current: recomCurrent.value,
  pageSize: 10
})

// 文章列表数据
const attenList = ref([])
const recomList = ref([])
const loseList = ref([])
const eatList = ref([])

// 获取文章列表数据
const fetchKnowledgeList = async () => {
  params.value.type = activeName.value
  let rowList = []
  if (activeName.value === 'like') {
    // 关注页面
    params.value.current = attenCurrent.value
    const { data: { rows } } = await getKnowledgeList(params.value)
    rowList = rows
  } else if (activeName.value === 'recommend') {
    // 推荐页面
    params.value.current = recomCurrent.value
    const { data: { rows } } = await getKnowledgeList(params.value)
    rowList = rows
  } else if (activeName.value === 'fatReduction') {
    // 减脂页面
    params.value.current = loseCurrent.value
    const { data: { rows } } = await getKnowledgeList(params.value)
    rowList = rows
  } else {
    // 饮食页面
    params.value.current = eatCurrent.value
    const { data: { rows } } = await getKnowledgeList(params.value)
    rowList = rows
  }

  if (rowList.length === 0) {
    finished.value = true
    loading.value = false
    return
  }

  if (activeName.value === 'like') {
    // 关注页面
    attenList.value.push(...rowList)
  } else if (activeName.value === 'recommend') {
    // 推荐页面
    recomList.value.push(...rowList)
  } else if (activeName.value === 'fatReduction') {
    // 减脂页面
    loseList.value.push(...rowList)
  } else {
    // 饮食页面
    eatList.value.push(...rowList)
  }
  loading.value = false
}

// 加载状态
const loading = ref(false)
// true 全部加载完成
const finished = ref(false)

// 加载
const onLoad = () => {
  loading.value = true
  fetchKnowledgeList()
  if (activeName.value === 'like') {
    // 关注页面
    attenCurrent.value++
  } else if (activeName.value === 'recommend') {
    // 推荐页面
    recomCurrent.value++
  } else if (activeName.value === 'fatReduction') {
    // 减脂页面
    loseCurrent.value++
  } else {
    // 饮食页面
    eatCurrent.value++
  }
}

// 切换标签时触发
const onChange = () => {
  finished.value = false
}

// 关注
const onLikeFlag = (id) => {
  if (activeName.value === 'like') {
    // 关注页面
    const index = attenList.value.findIndex(item => item.id === id)
    attenList.value[index].likeFlag = !attenList.value[index].likeFlag
  } else if (activeName.value === 'recommend') {
    // 推荐页面
    const index = recomList.value.findIndex(item => item.id === id)
    recomList.value[index].likeFlag = !recomList.value[index].likeFlag
  } else if (activeName.value === 'fatReduction') {
    // 减脂页面
    const index = loseList.value.findIndex(item => item.id === id)
    loseList.value[index].likeFlag = !loseList.value[index].likeFlag
  } else {
    // 饮食页面
    const index = eatList.value.findIndex(item => item.id === id)
    eatList.value[index].likeFlag = !eatList.value[index].likeFlag
  }
}
</script>

<style lang="scss" scoped>
.home {
  font-size: 27px;
  // 头部搜索区域
  .head {
    padding: 30px;
    margin-bottom: 40px;
    border-bottom-left-radius: 50% 24%;
    border-bottom-right-radius: 50% 24%;
    height: 180px;
    background: linear-gradient(#53cdc6, #26bcc6);
    .title {
      margin-bottom: 40px;
      font-size: 36px;
      color: #fff;
    }
    .search {
      padding: 20px 40px;
      width: 100%;
      height: 76px;
      border-radius: 38px;
      background-color: #fff;
      box-shadow: 0 20px 30px 8px #e9f2fc;
      color: #979797;
      .search_icon {
        margin-right: 12px;
        width: 32px;
        height: 32px;
        vertical-align: bottom;
      }
    }
  }

  // nav导航区域
  .nav {
    padding: 30px 30px 10px;
    .diagnose {
      display: flex;
      margin-bottom: 18px;
      .item {
        flex: 1;
        text-align: center;
        .img {
          width: 94px;
          height: 94px;
        }
        .desc {
          font-size: 23px;
          color: #848484;
        }
      }
    }
    ::v-deep .van-grid {
      &::after {
        border: 0;
      }
      .van-grid-item__content {
        &::after {
          border: 0;
        }
        .van-grid-item__text {
          font-size: 26px;
        }
      }
    }
    .icon {
      width: 60px;
      height: 60px;
    }

    // 轮播图
    .my-swipe {
      border-radius: 40px;
      height: 200px;
      .van-swipe-item {
        .swipeImg {
          width: 100%;
        }
      }
    }
  }

  // 主体内容区域
  ::v-deep .van-tabs {
    margin-bottom: 100px;
    .van-tab--active {
      font-weight: normal;
    }
    .van-tabs__line {
      width: 40px;
      background-color: #16c2a3;
    }
    .van-tabs__content {
      padding-top: 18px;
    }
  }
}
</style>
